<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    
      <a-form :form="form">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol2"
          label="">
          <a-input id="input" placeholder="请输入搜索关键词" @input="searchMap" v-model="searchContent" />
          <div id="container" style="width:100%;height:300px;">
            <div id="mpanel" class="map-panel"></div>
          </div>
        </a-form-item>
      </a-form>
      <a-form :form="form">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="经度">
          <a-input id="input" v-model="lat"  :readonly="true"/>
        </a-form-item>
      </a-form>
      <a-form :form="form">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="维度">
          <a-input id="input" v-model="lng" :readonly="true"/>
        </a-form-item>
      </a-form>
  </a-modal>
</template>

<script>
  import { httpAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import moment from "moment"

  export default {
    name: "OilConfModal",
    data () {
      return {
        title:"操作",
        modalWidth:800,
        drawerWidth:700,
        visible: false,
        searchContent: '',
        map: null,
        autoComplete: null,
        placeSearch: null,
        model: {},
        lat: '',
        lng: '',
        labelCol: {
          xs: { span: 24 },
          sm: { span: 1 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 23 },
        },
        wrapperCol2: {
          xs: { span: 24 },
          sm: { span: 24 },
        },

        confirmLoading: false,
        form: this.$form.createForm(this),
        url: {
          add: "/lww/oilConf/add",
          edit: "/lww/oilConf/edit",
        },
      }
    },
    beforeMount() {
    },
    mounted(){
      
    },
    beforeCreate() {
      
    },
    created () {
    },
    methods: {
      loadmap(){
        const map = new AMap.Map('container', {
         zoom: 9,
         resizeEnable: true
        });
        map.on('click', this.showLatLng);
        return map;
      },
      showLatLng(e) {
        let lat = e.lnglat.getLat();
        let lng = e.lnglat.getLng();
        this.lat = lat;
        this.lng = lng;
      },
      searchMap() {
        let that = this;
        let keyword = this.searchContent;
        AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'],function(){//异步加载插件
            var autoOptions = {
              city: '全国',
              input: "input"
            }
            that.autoComplete= new AMap.Autocomplete(autoOptions);
            AMap.event.addListener(that.autoComplete, "select", that.select);//注册监听，当选中某条记录时会触发
        });
      },
      select(e) {
        let that = this;
        that.placeSearch= new AMap.PlaceSearch({
            pageSize: 5, // 单页显示结果条数
            pageIndex: 1, // 页码
            city: "010", // 兴趣点城市
            citylimit: true,  //是否强制限制在设置的城市内搜索
            map: that.map, // 展现结果的地图实例
            panel: "mpanel", // 结果列表将在此容器中进行展示。
            autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
            
            });
        that.placeSearch.setCity(e.poi.adcode);
        that.placeSearch.search(e.poi.name, function(status, result) {});
        AMap.event.addListener(that.placeSearch, "markerClick", that.markerClick);
      },
      markerClick(e) {
        let position = e.marker.getPosition();
        let lat = position.lat;
        let lng = position.lng;
        this.lat = lat;
        this.lng = lng;
      },
      add () {
        this.edit({});
      },
      edit (record) {
        //this.resetScreenSize();
        let that = this;
        that.searchContent = '';
        that.lat = '';
        that.lng = '';
        // that.form.resetFields();
        // that.map = that.loadmap();  //加载地图和相关组件
        that.visible = true;
        setTimeout(function() {!that.map && (that.map = that.loadmap())}, 1500);  //加载地图和相关组件

      },
      resetScreenSize(){
        let screenWidth = document.body.clientWidth;
        if(screenWidth < 500){
          this.drawerWidth = screenWidth;
        }else{
          this.drawerWidth = 700;
        }
      },
      close () {
        this.$emit('close');
        this.visible = false;
        // this.map && this.map.destroy();
        // this.autoComplete && AMap.event.removeListener(this.autoComplete);
        // this.placeSearch && AMap.event.removeListener(this.placeSearch);
      },
      handleOk () {
        let p = {lat: this.lat, lng: this.lng};
        this.$emit('ok', p)
        this.close();
      },
      handleCancel() {
        this.close()
      },
    }
  }
</script>

<style lang="less" scoped>
  .map-panel {
    position: absolute;
    background-color: white;
    max-height: 90%;
    overflow-y: auto;
    top: 10px;
    right: 10px;
    width: 280px;
    z-index: 1;
  }
</style>